import React, { useState, useEffect } from 'react';
import { 
  Card, 
  Space, 
  Button,
  Form,
  Input,
  Row,
  Col,
  Rate,
  message,
  Drawer,
  Descriptions,
  Empty,
  List,
  Avatar,
  Typography
} from 'antd';
import { SearchOutlined, UserOutlined } from '@ant-design/icons';
import request from '../../utils/request';
import './index.less';
import useAuthStore from '../../stores/authStore';
const { Text } = Typography;

const Evaluations = () => {
  const [loading, setLoading] = useState(false);
  const [evaluations, setEvaluations] = useState([]);
  const [detailVisible, setDetailVisible] = useState(false);
  const [currentEvaluation, setCurrentEvaluation] = useState(null);
  const [form] = Form.useForm();
  const { user } = useAuthStore();

  // 获取评价列表
  const fetchEvaluations = async (params = {}) => {
    try {
      if (!user?.id) {
        message.error('未获取到教师信息');
        return;
      }
      setLoading(true);
      const res = await request.get('/api/admin/evaluations', { 
        params: {
          ...params,
          teacherId: user.id
        }
      });
      if (res.code === 0) {
        setEvaluations(res.data);
      }
    } catch (error) {
      message.error('获取评价列表失败');
    } finally {
      setLoading(false);
    }
  };

  // 处理搜索
  const handleSearch = (values) => {
    const cleanParams = {};
    
    if (values.keyword) {
      cleanParams.keyword = values.keyword;
    }
    
    if (values.dateRange) {
      cleanParams.startDate = values.dateRange[0].format('YYYY-MM-DD');
      cleanParams.endDate = values.dateRange[1].format('YYYY-MM-DD');
    }
    
    fetchEvaluations(cleanParams);
  };

  // 查看详情
  const handleViewDetail = (record) => {
    setCurrentEvaluation(record);
    setDetailVisible(true);
  };

  useEffect(() => {
    if (user?.id) {
      fetchEvaluations();
    }
  }, [user]);

  return (
    <Card title="评价管理" className="evaluation-page">
      {/* 搜索表单 */}
      <Form
        form={form}
        layout="inline"
        onFinish={handleSearch}
        className="search-form"
      >
        <Row style={{ width: '100%' }}>
          <Col>
            <Form.Item name="keyword">
              <Input
                placeholder="搜索课程名称/联系人"
                prefix={<SearchOutlined />}
                style={{ width: 300 }}
              />
            </Form.Item>
          </Col>
          <Col>
            <Form.Item>
              <Space>
                <Button type="primary" htmlType="submit">
                  搜索
                </Button>
                <Button onClick={() => {
                  form.resetFields();
                  fetchEvaluations();
                }}>
                  重置
                </Button>
              </Space>
            </Form.Item>
          </Col>
        </Row>
      </Form>

      {/* 评价列表 */}
      <List
        grid={{
          gutter: 24,
          xs: 1,
          sm: 2,
          md: 2,
          lg: 3,
          xl: 3,
          xxl: 4,
        }}
        dataSource={evaluations}
        loading={loading}
        renderItem={(item) => (
          <List.Item>
            <Card
              hoverable
              onClick={() => handleViewDetail(item)}
              className="evaluation-card"
            >
              <Card.Meta
                avatar={
                  <div className="user-avatar">
                    {item.avatar ? (
                      <Avatar src={item.avatar} size={48} />
                    ) : (
                      <Avatar icon={<UserOutlined />} size={48} className="default-avatar" />
                    )}
                  </div>
                }
                title={
                  <Space className="card-title">
                    <Text strong className="user-name">{item.contact_name}</Text>
                    <Rate disabled defaultValue={item.rating} className="rate" />
                  </Space>
                }
                description={
                  <Space direction="vertical" className="card-content">
                    <Text className="course-title">{item.course_title}</Text>
                    <Text type="secondary" className="booking-time">
                      {item.booking_date} {item.time_slot}
                    </Text>
                    <Text className="comment-text">{item.comment}</Text>
                    <Text className="rating-time">评价时间：{item.rating_time}</Text>
                  </Space>
                }
              />
            </Card>
          </List.Item>
        )}
        locale={{
          emptyText: <Empty description="暂无评价" />
        }}
      />

      {/* 详情抽屉 */}
      <Drawer
        title="评价详情"
        placement="right"
        width={600}
        onClose={() => setDetailVisible(false)}
        open={detailVisible}
        className="detail-drawer"
      >
        {currentEvaluation && (
          <Space direction="vertical" style={{ width: '100%' }}>
            <Card className="detail-card">
              <Space align="start">
                {currentEvaluation.avatar ? (
                  <Avatar size={64} src={currentEvaluation.avatar} />
                ) : (
                  <Avatar size={64} icon={<UserOutlined />} className="default-avatar" />
                )}
                <Space direction="vertical" className="user-info">
                  <Text strong className="user-name">{currentEvaluation.contact_name}</Text>
                  <Rate disabled defaultValue={currentEvaluation.rating} className="rate" />
                  <Text type="secondary">{currentEvaluation.rating_time}</Text>
                </Space>
              </Space>
            </Card>
            <Card title="课程信息" className="detail-card">
              <Descriptions column={1}>
                <Descriptions.Item label={<Text strong className="description-label">课程名称</Text>}>
                  {currentEvaluation.course_title}
                </Descriptions.Item>
                <Descriptions.Item label={<Text strong className="description-label">预约日期</Text>}>
                  {currentEvaluation.booking_date}
                </Descriptions.Item>
                <Descriptions.Item label={<Text strong className="description-label">时间段</Text>}>
                  {currentEvaluation.time_slot}
                </Descriptions.Item>
              </Descriptions>
            </Card>
            <Card title="评价内容" className="detail-card">
              <Text className="comment-content">{currentEvaluation.comment}</Text>
            </Card>
            <Card title="联系方式" className="detail-card">
              <Descriptions column={1}>
                <Descriptions.Item label={<Text strong className="description-label">联系电话</Text>}>
                  {currentEvaluation.contact_phone}
                </Descriptions.Item>
              </Descriptions>
            </Card>
          </Space>
        )}
      </Drawer>
    </Card>
  );
};

export default Evaluations; 